<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<view class="wrap">
				<view class="">
					<view class="newslist" v-for="(item,index) in articleData" :key="item.plotId">
						<view class="nleft">
							<image class="image" src="/static/sj_machine.png" mode="aspectFill"></image>
						</view>
						<view class="nright">
							<view class="top-flex shangmian">
								<view class="name">
									{{item.name}}
								</view>
								<view class="bleft" @click="$public.navto('/pages/index/map',{lat:item.lat,lng:item.lng})">
									导航
								</view>
							</view>
							<view class="top-flex btn-div">
								<view class="btime">
									<image src="/static/sj_sqlocation.png" mode="scaleToFill" class="locimg"></image>
								</view>
								<view class="juli">约{{item.juli}}km</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				articleData: [],
				myLocation: {}
			};
		},
		onLoad() {},
		onShow() {
			if (!this.$public.isLoginUrl())
				return false;
			else
				this.getMachineList()
		},
		methods: {
			getMachineList() {
				let that = this
				this.$public.getLocation()
				let location = uni.getStorageSync('setLocation');
				if (location) {
					this.myLocation = location
				}
				this.$public.htmlPost("/api/getMachineList").then((res) => {
					console.log("getMachineList res", res)
					let data = res.data;
					if (data.code == 0) {
						that.articleData = []
						data.data.forEach(item => {
							let arr = null
							if (item.bak1.indexOf("，") >= 0) {
								arr = item.bak1.split("，");
							} else {
								arr = item.bak1.split(",");
							}
							if (arr.length > 1) {
								item.lat = arr[0].trim();
								item.lng = arr[1].trim();
								item.juli = that.$public.distance(item.lat, item.lng, that.myLocation.lat, that.myLocation.lng)
							} else {
								item.lat = 27.993864;
								item.lng = 120.699269;
								item.juli = that.$public.distance(item.lat, item.lng, that.myLocation.lat, that.myLocation.lng)
							}
							that.articleData.push(item)
						})
						that.articleData.sort(function(a, b) {
							return a.juli - b.juli
						});
						// that.articleData = data.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.wrap {
			padding: $uni-wrap-padding;
			padding-top: 30rpx;
		}

		.newslist {
			display: flex;
			justify-content: space-between;
			// padding: 45rpx 0;
			// border-bottom: 2rpx solid #f2f2f2;
			background: #fff;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.nleft {
				width: 200rpx;
				height: 200rpx;
				background: #DF686A;
				display: flex;
				align-items: center;
				justify-content: center;

				.image {
					width: 188rpx;
					height: 188rpx;
					// border-radius: 20rpx;
				}
			}

			.nright {
				width: 480rpx;
				padding: 20rpx;

				.top-flex {
					display: flex;
					justify-content: space-between;

					.name {
						font-size: 32rpx;
					}

					.bleft {
						display: inline-block;
						width: 140rpx;
						height: 42rpx;
						color: #DF686A;

						background: rgba(223, 104, 106, 0.1);
						font-size: 28rpx;
						text-align: center;
						line-height: 42rpx;
						border-radius: 32rpx;
					}
				}

				.shangmian {
					height: 100rpx;
				}


				.btn-div {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					align-items: center;

					.locimg {
						width: 32rpx;
						height: 32rpx;
					}

					.juli {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
	}
</style>